<template>
  <span v-for="(child, index) in menuList">
    <el-menu-item :index="`${child.path}`" v-if="!child.children">
      <el-icon v-if="child.meta.icon">
        <component :is="child.meta.icon" />
      </el-icon>
      {{ child.meta.menuName }}
    </el-menu-item>
    <!-- 有子菜单 -->
    <el-sub-menu :index="`${child.path}`" v-else>
      <template #title>
        <el-icon v-if="child.meta.icon">
          <component :is="child.meta.icon" />
        </el-icon>
        {{ child.meta.menuName }}
      </template>
      <el-menu-item-group v-for="(child, index) in menuList">
        <!-- 递归子菜单 -->
        <MenuItem :menuList="child.children"></MenuItem>
      </el-menu-item-group>
    </el-sub-menu>
  </span>
</template>
<script setup>
import { useStore } from "../../store";
import { defineProps } from "vue";
let store = useStore();
const props = defineProps({
  menuList: {
    type: Array,
    default: () => [],
  },
});
</script>
<script>
export default {
  name: "MenuItem", //给组件命名
};
</script>
<style></style>
